<template>
  <div>
    <div class="divUpload">
      <el-upload :limit=limitNum :auto-upload="false" accept=".xlsx" :action="UploadUrl()"
        :before-upload="beforeUploadFile" :on-change="fileChange" :on-exceed="exceedFile" :file-list="fileList">
        <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="mini" type="success" @click="uploadFile">上传<i
            class="el-icon-upload el-icon--right"></i></el-button>
        <div class="el-upload__tip" slot="tip">只能上传xlsx文件，且不超过10M</div>
      </el-upload>
    </div>
    <div class="divTable">
      <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%" border> max-height="550"
        <el-table-column property="Name" label="名称" width="220">
        </el-table-column>
        <el-table-column property="Code" label="代号" width="320">
        </el-table-column>
        <el-table-column property="Price" label="价格" width="80">
        </el-table-column>
        <el-table-column property="Discount" label="折扣" width="120">
        </el-table-column>
        <el-table-column property="Unit" label="单位" width="120">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    category: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [], // excel文件列表
      tableData: []
    }
  },
  methods: {
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList.push(file.raw);
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1);
      const size = file.size / 1024 / 1024;
      if (extension !== 'xlsx') {
        this.$message.warning('只能上传后缀是.xlsx的文件');
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M');
      }
    },
    UploadUrl: function () {
      // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
      return ''
    },
    uploadFile() {
      const _this = this;
      if (_this.fileList.length === 0) {
        _this.$message.warning('请上传文件');
      } else {
        const form = new FormData();
        form.append('file', _this.fileList[0]);
        _this.$api.GoodsApi.ImportGoodsData(form).then(res => {
          _this.tableData = res.Result;
          _this.fileList = [];
        });
      }
    },
    SaveData() {
      const _this = this;
      if (_this.tableData.length === 0) {
        _this.$message.warning('请上传之后再保存');
        return false;
      }
      var postData = _this.tableData.map(item => {
        item.Category = this.category;
        return item;
      })
      _this.$api.GoodsApi.SaveGoodsData(postData).then(res => {
        _this.$emit('callback');
        _this.ClearData();
      })
    },
    ClearData() {
      this.tableData = [];
    }
  }
}
</script>
